import React, { useState ,useEffect} from 'react';
import { PieChart, Pie, Legend, Tooltip, ResponsiveContainer } from 'recharts';
import axios from 'axios';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import RefreshIcon from '@mui/icons-material/Refresh';
import ListSubheader from '@mui/material/ListSubheader';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Collapse from '@mui/material/Collapse';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import DraftsIcon from '@mui/icons-material/Drafts';
import SendIcon from '@mui/icons-material/Send';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';
import PersonIcon from '@mui/icons-material/Person';




const data01 = [
  { name: 'Group A', value: 400 },
  { name: 'Group B', value: 300 },
  { name: 'Group C', value: 300 },
  { name: 'Group D', value: 200 },
  { name: 'Group E', value: 278 },
  { name: 'Group F', value: 189 },
];
export default function Content() {
  const [open, setOpen] = React.useState(true);
  const [rows2, setRows2] = useState([]);
  const [rows10, setRows10] = useState([]);
  const [rows11, setRows11] = useState([]);
  const [rows12, setRows12] = useState([]);
  useEffect(() => {
    axios.get('http://172.24.56.192:5000/index/investsuggestion',{headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
              }})
                .then(function (response) {
                    // 这里是处理响应的代码
                  // var code = response['code']
                  console.log(response);
                  console.log(response.data);
                  console.log(response.data.data);

                  setRows2(response.data['data']);
                  setRows10(response.data['data1']);
                  setRows11(response.data['data2']); 
                  setRows12(response.data['data3']);                   
                })
                .catch(function (error) {
                    // 这里是处理错误的代码
                  // window.location.href="https://www.baidu.com/"
                    console.log(error);
                  
                });},[]);


    const handleClick1 = () => {
      
      const purse_stock = new FormData();

      purse_stock.append('name1',rows2[0]['name1']);
      purse_stock.append('name2',rows2[0]['name2']);
      purse_stock.append('name3',rows2[0]['name3']);
      purse_stock.append('amount1',rows2[0]['val1']);
      purse_stock.append('amount2',rows2[0]['val2']);
      purse_stock.append('amount3',rows2[0]['val3']);
      
      console.log(purse_stock);
      
  
      axios.post('http://172.24.56.192:5000/index/investsuggestion', purse_stock,{headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
        }})
        .then(response => {
          // 处理成功响应
          console.log(purse_stock);
          console.log(response.data);
          if(response.data['code'] == 200)
        {
            alert('Success')
            window.location.href="AppHome_Per"           
        }
          //window.location.href="AppHome_Aut_2";
  
          // 在这里进行其他操作，如更新状态、显示成功提示等
        })
        .catch(error => {
          // 处理错误
          console.error(error);
          // 在这里进行其他操作，如显示错误提示等
        });
  
  
  
  
  
    };


    const handleClick2 = () => {
      
      const purse_stock = new FormData();

      purse_stock.append('name1',rows2[1]['name1']);
      purse_stock.append('name2',rows2[1]['name2']);
      purse_stock.append('name3',rows2[1]['name3']);
      purse_stock.append('amount1',rows2[1]['val1']);
      purse_stock.append('amount2',rows2[1]['val2']);
      purse_stock.append('amount3',rows2[1]['val3']);
      
      console.log(purse_stock);
      
  
      axios.post('http://172.24.56.192:5000/index/investsuggestion', purse_stock,{headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
        }})
        .then(response => {
          // 处理成功响应
          console.log(purse_stock);
          console.log(response.data);

          if(response.data['code'] == 200)
          {
              alert('Success')
              window.location.href="AppHome_Per"           
          }
          //window.location.href="AppHome_Aut_2";
  
          // 在这里进行其他操作，如更新状态、显示成功提示等
        })
        .catch(error => {
          // 处理错误
          console.error(error);
          // 在这里进行其他操作，如显示错误提示等
        });
  
  
  
  
  
    };

    const handleClick3 = () => {
      
      const purse_stock = new FormData();

      purse_stock.append('name1',rows2[2]['name1']);
      purse_stock.append('name2',rows2[2]['name2']);
      purse_stock.append('name3',rows2[2]['name3']);
      purse_stock.append('amount1',rows2[2]['val1']);
      purse_stock.append('amount2',rows2[2]['val2']);
      purse_stock.append('amount3',rows2[2]['val3']);
      
      console.log(purse_stock);
      
  
      axios.post('http://172.24.56.192:5000/index/investsuggestion', purse_stock,{headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
        }})
        .then(response => {
          // 处理成功响应
          console.log(purse_stock);
          console.log(response.data);
          if(response.data['code'] == 200)
          {
              alert('Success')
              window.location.href="AppHome_Per"           
          }
          //window.location.href="AppHome_Aut_2";
  
          // 在这里进行其他操作，如更新状态、显示成功提示等
        })
        .catch(error => {
          // 处理错误
          console.error(error);
          // 在这里进行其他操作，如显示错误提示等
        });
  
  
  
  
  
    };


  useEffect(() => {
    console.log(rows2);
  }, [rows2]);
 

  const handleClick = () => {
    setOpen(!open);
  };

return (
<Paper sx={{ maxWidth: 2000, margin: 'auto', overflow: 'hidden' }}>
      
      <List
        sx={{ width: '100%', maxWidth: 2000, bgcolor: 'background.paper' }}
        component="nav"
        aria-labelledby="nested-list-subheader"
      >



          <ListItemButton onClick={handleClick}>
            <ListItemText primary='产品一' primaryTypographyProps={{color: 'primary'}}/>
            {open ? <ExpandLess /> : <ExpandMore />}
          </ListItemButton>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <List component="div" >
            {rows2.length > 0 ? (
        <ListItemButton sx={{ pl: 4 }}>
          <ListItemText primary={rows2[0]['intro']} />
        </ListItemButton>
      ) : (
        <ListItemButton sx={{ pl: 4 }}>
          <ListItemText primary="Loading..." />
        </ListItemButton>
      )}
              <Grid container spacing={2}>
              <Grid item xs={12} style={{ marginLeft: '400px' }}>
        <PieChart width={300} height={300}>
          <Pie
            dataKey="amount"
            isAnimationActive={false}
            data={rows10}
            cx="50%"
            cy="50%"
            outerRadius={80}
            fill="#8884d8"
            label
          />
          <Tooltip />
          
          
        </PieChart>
        
        </Grid>

                <Grid item xs={2}>
                  <Button>
                    Price:
                  </Button>  
                </Grid>

                <Grid item xs={8}>
                {rows2.length > 0 ? (
        <ListItemButton sx={{ pl: 4 }}>
          <ListItemText primary={rows2[0]['total_amt']} />
        </ListItemButton>
      ) : (
        <ListItemButton sx={{ pl: 4 }}>
          <ListItemText primary="Loading..." />
        </ListItemButton>
      )}
                </Grid>

                <Grid item xs>
                  <Button variant="outlined" color="success" onClick={handleClick1}>
                    Purchase
                  </Button>
                </Grid>
              </Grid>
            </List>
          </Collapse>
          <button></button>





          <ListItemButton onClick={handleClick}>
            <ListItemText primary="产品二" primaryTypographyProps={{color: 'primary'}}/>
            {open ? <ExpandLess /> : <ExpandMore />}
          </ListItemButton>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <List component="div" >
            {rows2.length > 0 ? (
        <ListItemButton sx={{ pl: 4 }}>
          <ListItemText primary={rows2[1]['intro']} />
        </ListItemButton>
      ) : (
        <ListItemButton sx={{ pl: 4 }}>
          <ListItemText primary="Loading..." />
        </ListItemButton>
      )}
              <Grid container spacing={2}>
              <Grid item xs={12} style={{ marginLeft: '400px' }}>
        <PieChart width={300} height={300}>
          <Pie
            dataKey="amount"
            isAnimationActive={false}
            data={rows11}
            cx="50%"
            cy="50%"
            outerRadius={80}
            fill="#FFBE7A"
            label
          />
          <Tooltip />
          
          
        </PieChart>
        
        </Grid>

                <Grid item xs={2}>
                  <Button>
                    Price:
                  </Button>  
                </Grid>

                <Grid item xs={8}>
                {rows2.length > 0 ? (
        <ListItemButton sx={{ pl: 4 }}>
          <ListItemText primary={rows2[1]['total_amt']} />
        </ListItemButton>
      ) : (
        <ListItemButton sx={{ pl: 4 }}>
          <ListItemText primary="Loading..." />
        </ListItemButton>
      )}
                </Grid>

                <Grid item xs>
                  <Button variant="outlined" color="success" onClick={handleClick2}>
                   Purchase
                  </Button>
                </Grid>
              </Grid>
            </List>
          </Collapse>
          <button></button>






          <ListItemButton onClick={handleClick}>
            <ListItemText primary="产品三" primaryTypographyProps={{color: 'primary'}}/>
            {open ? <ExpandLess /> : <ExpandMore />}
          </ListItemButton>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <List component="div" >
            {rows2.length > 0 ? (
        <ListItemButton sx={{ pl: 4 }}>
          <ListItemText primary={rows2[2]['intro']} />
        </ListItemButton>
      ) : (
        <ListItemButton sx={{ pl: 4 }}>
          <ListItemText primary="Loading..." />
        </ListItemButton>
      )}
              <Grid container spacing={2}>
              <Grid item xs={12} style={{ marginLeft: '400px' }}>
        <PieChart width={300} height={300}>
          <Pie
            dataKey="amount"
            isAnimationActive={false}
            data={rows12}
            cx="50%"
            cy="50%"
            outerRadius={80}
            fill="#FF8884"
            label
          />
          <Tooltip />
          
          
        </PieChart>
        
        </Grid>

                <Grid item xs={2}>
                  <Button>
                    Price:
                  </Button>  
                </Grid>

                <Grid item xs={8}>
                {rows2.length > 0 ? (
        <ListItemButton sx={{ pl: 4 }}>
          <ListItemText primary={rows2[2]['total_amt']} />
        </ListItemButton>
      ) : (
        <ListItemButton sx={{ pl: 4 }}>
          <ListItemText primary="Loading..." />
        </ListItemButton>
      )}
                </Grid>

                <Grid item xs>
                  <Button variant="outlined" color="success" onClick={handleClick3}>
                   Purchase
                  </Button>
                </Grid>
              </Grid>
            </List>
          </Collapse>
          <button></button>








      </List>

      

      
</Paper>
  );
}